// /**
//  * 目标1：信息渲染
//  *  1.1 获取用户的数据
//  *  1.2 回显数据到标签上
//  * */
// axios({
//   url: 'http://hmajax.itheima.net/api/settings',
//   method: 'GET',
//   params: {
//     creator: '播仔'
//   }
// }).then(res => {
//   const userobj = res.data.data
//   // 1.2 回显数据到标签上
//   // document.querySelector('.user-name').textContent = userinfo.username
//   // document.querySelector('.user-email').textContent = userinfo.email
//   Object.keys(userobj).forEach(key => {
//     if (key === 'avatar') {
//       document.querySelector('.prew').src = userobj[key]
//     } else if (key === 'gender') {
//       const glist = document.querySelectorAll('.gender')
//       const gindex = userobj[key] === '男' ? 0 : 1
//       glist[gindex].checked = true
//     } else {
//       document.querySelector(`.${key}`).value = userobj[key]
//     }
//   })
// })
// // 目标2：修改头像
// document.querySelector('.upload').addEventListener('change', e => {
//   const file = e.target.files[0]
//   const fd = new FormData()
//   fd.append('avatar', file)
//   fd.append('creator', '播仔')
//   axios({
//     url: 'http://hmajax.itheima.net/api/avatar',
//     method: 'PUT',
//     data: fd
//   }).then(res => {
//     const imgurl = res.data.data.avartar
//     document.querySelector('.prew').src = imgurl
//   })
// })
// // 目标3：修改信息
// document.querySelector('.submit').addEventListener('click', () => {
//   // 3.1 收集表单信息
//   const userForm = document.querySelector('.user-form')
//   const userObj = serialize(userForm, { hash: true, empty: true })
//   userObj.creator = ''
//   // 性别数字字符串，转成数字类型
//   userObj.gender = +userObj.gender
//   console.log(userObj)
//   // 3.2 提交到服务器保存
//   axios({
//     url: 'http://hmajax.itheima.net/api/settings',
//     method: 'PUT',
//     data: userObj
//   }).then(result => {
//     // 4.1 创建toast对象
//     const toastDom = document.querySelector('.my-toast')
//     const toast = new bootstrap.Toast(toastDom)

//     // 4.2 调用show方法->显示提示框
//     toast.show()
//   })
// })
// // document.querySelector('.submit').addEventListener('click', () => {
// //   // const userinfo = {
// //   //   username: document.querySelector('.username').value,
// //   //   email: document.querySelector('.email').value,
// //   //   gender: document.querySelector('.gender:checked').value,
// //   //   creator: '播仔'
// //   // }
// //   const userform = document.querySelectorAll('.user-form')
// //   const userobj = serialize(userform, { hash: true, empty: true })
// //   userobj.creator = '播仔'
// //   userobj.gender = +userobj.gender
// //   axios({
// //     url: 'http://hmajax.itheima.net/api/settings',
// //     method: 'PUT',
// //     data: userobj
// //   }).then(res => {
// //     console.log(res)
// //   })
// // })
const creator = '播仔'
// 1.1 获取用户的数据
axios({
  url: 'http://hmajax.itheima.net/api/settings',
  params: {
    creator
  }
}).then(result => {
  const userObj = result.data.data
  // 1.2 回显数据到标签上
  Object.keys(userObj).forEach(key => {
    if (key === 'avatar') {
      // 赋予默认头像
      document.querySelector('.prew').src = userObj[key]
    } else if (key === 'gender') {
      // 赋予默认性别
      // 获取性别单选框：[男radio元素，女radio元素]
      const gRadioList = document.querySelectorAll('.gender')
      // 获取性别数字：0男，1女
      const gNum = userObj[key]
      // 通过性别数字，作为下标，找到对应性别单选框，设置选中状态
      gRadioList[gNum].checked = true
    } else {
      // 赋予默认内容
      document.querySelector(`.${key}`).value = userObj[key]
    }
  })
})

/**
 * 目标2：修改头像
 *  2.1 获取头像文件
 *  2.2 提交服务器并更新头像
 * */
// 文件选择元素->change事件
document.querySelector('.upload').addEventListener('change', e => {
  // 2.1 获取头像文件
  console.log(e.target.files[0])
  const fd = new FormData()
  fd.append('avatar', e.target.files[0])
  fd.append('creator', creator)
  // 2.2 提交服务器并更新头像
  axios({
    url: 'http://hmajax.itheima.net/api/avatar',
    method: 'PUT',
    data: fd
  }).then(result => {
    const imgUrl = result.data.data.avatar
    // 把新的头像回显到页面上
    document.querySelector('.prew').src = imgUrl
  })
})

/**
 * 目标3：提交表单
 *  3.1 收集表单信息
 *  3.2 提交到服务器保存
 */
/**
 * 目标4：结果提示
 *  4.1 创建toast对象
 *  4.2 调用show方法->显示提示框
 */
// 保存修改->点击
document.querySelector('.submit').addEventListener('click', () => {
  // 3.1 收集表单信息
  const userForm = document.querySelector('.user-form')
  const userObj = serialize(userForm, { hash: true, empty: true })
  userObj.creator = creator
  // 性别数字字符串，转成数字类型
  userObj.gender = +userObj.gender
  console.log(userObj)
  // 3.2 提交到服务器保存
  axios({
    url: 'http://hmajax.itheima.net/api/settings',
    method: 'PUT',
    data: userObj
  }).then(result => {
    // 4.1 创建toast对象
    const toastDom = document.querySelector('.my-toast')
    const toast = new bootstrap.Toast(toastDom)

    // 4.2 调用show方法->显示提示框
    toast.show()
  })
})
